<template>
  <div>
    <Layout :style="{padding: '0 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>知识管理</BreadcrumbItem>
        <BreadcrumbItem>
          <router-link to="/index/knowledgeBox">知识体系库</router-link>
        </BreadcrumbItem>
        <BreadcrumbItem>历史纪录
          <!-- <router-link to="/editQuestion">修改问题</router-link> -->
        </BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
        <div>
          <div class="messageTitle message">
            <div style="width:20%;">版本号</div>
            <div style="width:30%;">修改时间</div>
            <div style="width:25%;">处理人</div>
            <div style="width:25%;">操作</div>
          </div>
          <div class="message" v-for="(item,index) in showHistoryList" :key="index">
            <div style="width:20%;">{{item.version}}</div>
            <div style="width:30%;">{{item.updateTime}}</div>
            <div style="width:25%;">{{item.author}}</div>
            <div style="width:25%;">
              <Button type="info" size="small" ghost @click="detail = true; modelDetail(item)">查看详情</Button>
            </div>
            <!-- 历史详情对话框 -->
            <Modal v-model="detail" title="历史详情" width="600">
              <div>
                <Form :value="historyDetil" label-position="right" :label-width="100">
                  <FormItem label="知识标题">
                    <Input v-model="historyDetil.question" disabled />
                  </FormItem>
                  <FormItem label="核心词">
                    <Input v-model="historyDetil.keyword" disabled />
                  </FormItem>
                  <FormItem label="答案">
                    <Input v-model="historyDetil.answer" type="textarea" :rows="3" disabled />
                  </FormItem>
                </Form>
              </div>
            </Modal>
          </div>
          <Page :total="historyCount" :page-size="pageSize" show-total @on-change="changePage"/>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script>
import axios from "axios";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";
import { timeFormat } from "../utils/changeTime.js";

export default {
  data() {
    return {
      historyDetil   : {},   //历史详情
      historyArray   : [],   //历史数组
      showHistoryList: [],
      historyCount   : 0,    //历史数据条数
      pageSize       : 10,

      detail: false  //历史详情对话框
    };
  },
  methods: {
    changePage(index) {
      console.log("页数变化", index);
      var _start               = (index - 1) * this.pageSize;
      var _end                 = index * this.pageSize;
          this.showHistoryList = this.historyArray.slice(_start, _end);
    },
    //查看历史详情
    modelDetail(e) {
      this.historyDetil = e;
      console.log("历史详情", e);
    }
  },
  mounted() {
    var that = this;
    console.log(that.$route.params.id);
    let questionId = that.$route.params.id;
    let url        = that.Api.url.history;
    let params     = {
      questionId: questionId
    };      
    that.http.get(url,{
        params: params
    }).then(res => {
      that.historyArray = res;
      that.historyCount = res.length;  //所有历史数据条数
      //时间格式转换
      res = timeFormat(res);
      if (that.historyCount < that.pageSize) {
        that.showHistoryList = that.historyArray;
      } else {
        that.showHistoryList = that.historyArray.slice(0, that.pageSize);
      }
    });
  }
};
</script>